<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      ok-text="确认保存"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="30%">
      <div style="margin-left: 150px">
        <!-- <Row style="margin-bottom: 15px">
          <Col span='7'>版页类型：</Col>
          <Col span='8'>{{confirmData.type === '0' ? '口碑结算' : ''}}</Col>
        </Row> -->
        <Row style="margin-bottom: 15px">
          <Col span='7'>分组标签名称：</Col>
          <Col span='8'>{{confirmData.srname ? confirmData.srname : '-'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>性别：</Col>
          <Col span='10'>{{confirmData.sex === 0 ? '女' : confirmData.sex === 1 ? '男' : '全部'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>意向商品：</Col>
          <Col span='10'>{{goodsList.filter(item => item.id === confirmData.gid)[0] ? goodsList.filter(item => item.id === confirmData.gid)[0].name : '全部'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>加入日期：</Col>
          <Col span='10'>{{confirmData.joindate && confirmData.joindate[0] ? `${this.$moment(confirmData.joindate[0]).format('YYYY/MM/DD')} - ${this.$moment(confirmData.joindate[1]).format('YYYY/MM/DD')}` : '-'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>签约销售：</Col>
          <Col span='10'>{{confirmData.name}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>跟踪状态：</Col>
          <Col span='10'>{{confirmData.state0 === 0 ? '有效' : confirmData.state0 === 1 ? '流失' : '全部'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>状态：</Col>
          <Col span='10'>{{confirmData.state === 0 ? '未预约' : confirmData.state === 1 ? '已预约' : confirmData.state === 2 ? '未到访' : confirmData.state === 3 ? '已到店' : confirmData.state === 4 ? '已签约' : confirmData.state === 5 ? '已退款' : '全部'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px">
          <Col span='7'>签约金额：</Col>
          <Col span='10'>{{confirmData.tprice ? confirmData.tprice : '-'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px" v-if="confirmData.repeat === 3">
          <Col span='7'>多次到店：</Col>
          <Col span='10'>{{confirmData.count ? confirmData.count : '-'}}</Col>
        </Row>
        <Row style="margin-bottom: 15px" v-if="confirmData.repeat === 4">
          <Col span='7'>多次购买：</Col>
          <Col span='10'>{{confirmData.count ? confirmData.count : '-'}}</Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'AddGroupConfirm',
  props: {
    confirmData: {}
  },
  data () {
    return {
      title: '',
      loading: true
    }
  },
  updated () {
    this.title = '创建标签确认框'
  },
  computed: {
    ...mapState({
      // row: state => state.taskList.row,
      modalState: state => state.modal.addGroupConfirmState,
      goodsList: state => state.goodService.goodsList
    })
  },
  methods: {
    ...mapActions(['updateAddGroupConfirmState', 'updateAddGroupDrawerState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$emit('add-confirm-valid')
    },
    cancel () {
      this.updateAddGroupConfirmState(false)
      this.updateAddGroupDrawerState(true)
    }
  }
}
</script>
